<template>
  <vxe-modal
    title="查看信息"
    v-model="dialogVisible"
    v-if="dialogVisible"
    :loading="loading"
    width="70%" showFooter esc-closable show-zoom resize>

    <div style="height: 69vh; overflow-y: auto;">
      <el-card class="box-card" shadow="never" :body-style="{ padding: '10px',backgroundColor: '#bfcdda' }">
        <!-- 基本资料 -->
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">基本资料</span>
          </div>
          <el-descriptions class="margin-top" :column="2" size="medium" border
                           :contentStyle="content_style" :labelStyle="label_style">
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  知识产权名称：
                </div>
              </template>
              {{ ipbData.zscqName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  类别：
                </div>
              </template>
              {{ ipbData.lb }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  认定年度：
                </div>
              </template>
              {{ ipbData.rdNd }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  授权年度：
                </div>
              </template>
              {{ ipbData.sqNd }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  知识产权编号：
                </div>
              </template>
              {{ ipbData.zscqBh }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  授权/专利号：
                </div>
              </template>
              {{ ipbData.sqZlh }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  授权日期：
                </div>
              </template>
              {{ ipbData.sqRq }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  获得方式：
                </div>
              </template>
              {{ ipbData.hdFs }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        <br>
        <!-- 相关附件 -->
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff">相关附件</span>
          </div>
          <el-table height="33vh" :header-cell-style="{background:'#d0cece',color:'#000000',fontWeight:'bold'}"
                    :data="zlRzFjList">
            <el-table-column label="序号" align="center" type="index" width="50"/>
            <el-table-column label="文件名称" align="center" prop="fileName" :formatter="getFileNames"/>
            <el-table-column label="文件大小" align="center" prop="fileSize" width="120"/>
            <el-table-column label="操作" width="120" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleDownload(scope.row)"
                >下载
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>

<!--        <el-card v-if="rzFjList != null" class="box-card" shadow="hover">-->
<!--          <div slot="header" class="clearfix">-->
<!--            <span style="font-size: 16px; color: #1890ff">相关附件</span>-->
<!--          </div>-->
<!--          <el-table height="33vh" :header-cell-style="{background:'#d0cece',color:'#000000',fontWeight:'bold'}"-->
<!--                    :data="rzFjList">-->
<!--            <el-table-column label="序号" align="center" type="index" width="50"/>-->
<!--            <el-table-column label="文件名称" align="center" prop="fileName" :formatter="getFileNames"/>-->
<!--            <el-table-column label="文件大小" align="center" prop="fileSize" width="120"/>-->
<!--            <el-table-column label="操作" width="120" align="center" class-name="small-padding fixed-width">-->
<!--              <template slot-scope="scope">-->
<!--                <el-button-->
<!--                  size="mini"-->
<!--                  type="text"-->
<!--                  icon="el-icon-edit"-->
<!--                  @click="handleDownload(scope.row)"-->
<!--                >下载-->
<!--                </el-button>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--          </el-table>-->
<!--        </el-card>-->
        <br>

      </el-card>
    </div>

    <div slot="footer" class="dialog-footer dialog-footer-center">
      <el-button @click="dialogVisible=false">关闭</el-button>
    </div>
  </vxe-modal>
</template>
<script>

import {getIpb} from "@/api/gqgl/ipb";
import {getRjsqdj} from "@/api/zscq/rzgl/rjsqdj";
import {getZlsb} from "@/api/zscq/zlsb/zlsb";

export default {
  name: "IpbXq", //IP表详情组件
  data() {
    return {
      zlRzFjList: null, //专利或者软著的附件
      rzFjList: null, //软著的附件
      loadingFj: false,
      loading: false,
      ipbData: [], //IP表基本资料
      ipbId: null, //IP表主键ID
      dialogVisible: false,
      content_style: {
        // 解决不对齐的问题
        'width': "400px",
        // 排列第二行
        'word-break': 'break-all',
        // 'background-color': '#f3f7ff'
      },
      label_style: {
        // 解决不对齐的问题
        'width': "250px",
        // 排列第二行
        'word-break': 'break-all',
      },
    };
  },
  created() {
  },
  methods: {
    // 文件下载处理
    handleDownload(row) {
      const resource = row.fileName;
      // 默认方法
      this.$download.resource(resource);
    },
    getFileNames(row) {
      // 从路径中提取文件名
      return row.fileName.split('/').pop(); // 返回文件名部分
    },
    handleOpen(row) {
      if (row.lb == '软件著作权') {
        getRjsqdj(row.zscqId).then(res => {
          console.log(res.data, 'dsaasdads')
          this.zlRzFjList = res.data.rzglRjsqdjFjList
        })
      } else {
        getZlsb(row.zscqId).then(res => {
          this.zlRzFjList = res.data.zlglZlsbFjList
        })
      }
      this.loading = true;
      this.ipbId = row.ipbId
      this.dialogVisible = true
      this.getIpbData()
      setTimeout(() => {
        this.loading = false
      }, 1000)
    },
    //获取详情数据
    getIpbData() {
      const ipbId = this.ipbId
      getIpb(ipbId).then(res => {
        this.ipbData = res.data
      })
    },


  }
};
</script>

<style scoped>
.right-align-label {
  text-align: right;
}
</style>
